<script setup lang="ts">
  import { CopyDocument, Plus } from '@element-plus/icons-vue';
  import { ElContainer, ElHeader, ElRow, ElCol, ElTooltip, ElIcon, ElMain } from 'element-plus';
</script>

<template>
  <div class="dataComponent">
    <el-container style="height: 95vh; display: flex; flex-direction: column">
      <el-header style="height: 5vh; margin-top: 16px">
        <el-row>
          <el-col :span="18"> 扩展数据</el-col>
          <el-col :span="3">
            <el-tooltip class="box-item" effect="dark" content="新建" placement="top">
              <el-icon>
                <Plus />
              </el-icon>
            </el-tooltip>
          </el-col>
          <el-col :span="3">
            <el-tooltip class="box-item" effect="dark" content="复制到其他模型" placement="top">
              <el-icon>
                <CopyDocument />
              </el-icon>
            </el-tooltip>
          </el-col>
        </el-row>
      </el-header>
    </el-container>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  export default defineComponent({
    name: 'dataComponent',
  });
</script>

<style scoped>
  .dataComponent {
    background-color: #1e2430;
    color: white;
    height: 95vh;
    overflow: auto;
  }
  :deep(.el-header) {
    color: #c9cbd5 !important;
    margin-left: 0.8vw;
    font-weight: 550;
    font-size: 1vw;
  }
</style>
